<template>
  <div>
    <el-card>
      <el-row>
        <h2>日历</h2>
      </el-row>
      <el-row>
        <el-select v-model="currentYear" @change="dateNOE">
          <el-option v-for="item in List" :key="item" :label="item" :value="item">{{ item }}</el-option>
        </el-select>
        <el-select v-model="currentMonth" @change="dateNOE">
          <el-option v-for="item in 12" :key="item" :label="item" :value="item">{{ item }}</el-option>
        </el-select>
      </el-row>
      <!-- 日历显示模块 -->
      <el-calendar v-model="currentDate" />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentYear: null, // 年份
      currentMonth: null, // 月份
      currentDate: null, // 日
      List: [],
      list: [{
        name: '张三',
        work: 80,
        date: 60,
        jijixing: 80,
        help995: 77,
        study: 66,
        truelv: 55
      },
      {
        name: '李四',
        work: 80,
        date: 60,
        jijixing: 80,
        help995: 77,
        study: 66,
        truelv: 55
      }]
    }
  },
  created() {
    // 1: 获取当前的年份
    this.currentYear = new Date().getFullYear()
    // 2: 获取当前的月份
    this.currentMonth = new Date().getMonth() + 1
    // 3: 生成需要显示的年份范围
    this.List = Array.from(Array(11), (v, i) => this.currentYear + i - 3)
    this.changeDate()
  },
  methods: {
    // 修改下拉改变日历
    dateNOE() {
      this.currentDate = new Date(`${this.currentYear}-${this.currentMonth}-1`) // 以一号开始
    },
    // 改变数据结构
    changeDate() {
      const arr1 = [] // 最后返回的数据
      this.list.forEach(item => {
        const Obj = {} // 用来存放每条的数据
        const arr = [] // 每一个对象里面的数据结构
        Object.keys(item).forEach(key => {
          if (key === 'name') {
            Obj.name = item[key]
          } else {
            arr.push(item[key])
          }
        })
        Obj.value = arr
        arr1.push(Obj)
      })
      return arr1
    }
  }
}
</script>

<style>

</style>
